
/**
 * 班组出勤
 */
var myEcharts2;
$(function(){
	
	myEcharts2 = echarts.init(document.getElementById('echarts_2'));
	
	
	
	loadGroupData();
	
	$(window).resize(function(){
		myEcharts2.resize();
	});

	
	
})





/**
 * -----------------------------------------------------------------------------------------------------------------------------------
 * 【工种】加载数据-接口
 */
function loadGroupData(){
	clearInterval(tempInterGroup);
	if(tempGroupState){
		tempGroupState = false;
	}
	$.post(ctxPath+'data/face/selectGroup', {}, function(result) {
		if(result.success){
			var data = result.data;
			$("#group_list").empty();
			for(var i=0; i<data.length; i++){
				var obj = data[i];
				obj.title = obj.name;
				obj.value = obj.timeCount;
				var s = '<div class="group_box">';
				if((i+1)%2 == 0){
					s = '<div class="group_box" style="background-color: rgba(128, 191, 255, 0.08);">';
				}
				s += '	<span class="group_text_1">'+(i+1)+'.'+obj.title+'</span>';
				s += '	<span class="group_text_2">'+obj.attendCount+'/'+obj.sum+'</span>';
				s += '	<span class="group_text_3">'+obj.timeCount+'</span>';
				s += '</div>';
				$("#group_list").append(s);
			}
			setTimeout(function () {
				showEchartsGroup(data);
				myEcharts2.resize();
			}, 2000)
			if(data.length > 5){
				clearInterval(tempInterGroup);
				tempInterGroup = setInterval(function(){
					if(!tempGroupState){
						infoGroup();
					}
				}, 4000);
			}
		}
	})
}

var tempInterGroup, tempGroupState;
/**
 * ------------------------------------------------------------------------------------------------------------------------------------
 * 滚动
 * @returns
 */
function infoGroup(){
	tempGroupState = true;
	var li = $("#group_list>.group_box:eq(0)").clone();
	$("#group_list>.group_box:eq(0)").animate({marginTop:"-1.38rem"}, 2000, function(){
		$("#group_list>.group_box:eq(0)").remove();
		if(tempGroupState){
			$("#group_list").append(li);
		}
		tempGroupState = false;
	})
}


var colorList = ['#8d7fec', '#5085f2', '#4168FF', '#47CBFF', '#f87be2', '#f2719a', '#fca4bb', '#f59a8f', '#fdb301', '#57e7ec', '#cf9ef1', '#5AD7D8', '#8163E9', '#FF5F45', '#B754F6', '#2998FF', '#938BF8'];
/**
 * -----------------------------------------------------------------------------------------------------------------------------------
 * 【工种】渲染echarts报表
 */
function showEchartsGroup(dataList){
	var index = 0;
	for(var i=0; i<dataList.length; i++){
		if(index == colorList.length){
			index = 0;
		}
		dataList[i].itemStyle = {color: colorList[index]};
		index ++;
	}
	
	var option = {
	    title: [
		{
			text: '',
			textStyle: {
				fontSize: 14,
				color:"#fff"
			},
			left: "50%"
		},
		{
			text: '班组',
			subtext:  dataList.length+'个',
			textStyle:{
				fontSize: 18,
				color:"#fff"
			},
			subtextStyle: {
				fontSize: 20,
				color: "#fff"
			},
			textAlign:"center",
			x: '49%',
			y: '40%',
		}],
	    tooltip: {
	        trigger: 'item',
	        formatter:function (parms){
	          var str=  parms.seriesName+"</br>"+
	            parms.marker+""+parms.data.name+"</br>"+
	            "数量："+ parms.data.value+"</br>"+
	            "占比："+ parms.percent+"%";
	            return  str ;
	        }
	    },
	    series: [
	        {
	            name:'工种',
	            type:'pie',
	            center: ['50%', '52%'],
	            radius: ['55%', '85%'],
	            clockwise: true, //饼图的扇区是否是顺时针排布
	            avoidLabelOverlap: false,
	            label: {
                normal: {
                    show: false,
                }
            },
	            data: dataList
	        }
	    ]
	};
    myEcharts2.setOption(option);
}









